<div>
    <span class="body-2 basic-900 margin-top-4 margin-05 block" w-i18n="modal.account.address"></span>
    <w-copy-wrap info="::$ctrl.address" ng-click="$ctrl.onCopyAddress()">
        <w-avatar size="30" address="$ctrl.address"></w-avatar>
        <div class="body-1 basic-900 mobile-low-fsize">{{::$ctrl.address}}</div>
    </w-copy-wrap>

    <div class="row">
        <span class="body-2 basic-900 margin-05 modal-header" w-i18n="modal.account.aliases"></span>
        <w-help-icon>
            <div class="help-icon__row headline-3" w-i18n="modal.accountInfo.alias.helpIcon.row1"></div>
            <div class="help-icon__row" w-i18n="modal.accountInfo.alias.helpIcon.row2"></div>
            <div class="help-icon__row" w-i18n="modal.accountInfo.alias.helpIcon.row3"></div>
        </w-help-icon>
        <div class="alias-list">
            <w-copy-wrap class="body-1 basic-900"
                         ng-repeat="alias in $ctrl.aliases"
                         ng-click="$ctrl.onCopyAlias()"
                         info="::alias">
                {{::alias}}
            </w-copy-wrap>
            <w-step-by-step active-step="$ctrl.createAliasStep">
                <w-step>
                    <w-permit name="CAN_CREATE_ALIAS_TRANSACTION" mode="on">
                        <div class="create-alias-wrap">
                            <w-analytics event="'Account Alias New Click'" event-target="'ui'">
                                <w-button class="tiny margin-right-1" w-step-next>
                                    <span w-i18n="modal.account.create"></span>
                                </w-button>
                            </w-analytics>
                            <span class="caption-1 basic-700"
                                  params="{price: $ctrl.fee.toFormat(), name: $ctrl.fee.asset.name}"
                                  w-i18n="modal.account.fee"></span>
                        </div>
                    </w-permit>
                    <w-permit name="CAN_CREATE_ALIAS_TRANSACTION" mode="off">
                        <div class="plate-warning warning-400 body-1 margin-top-2">
                            <w-permit-message literal="modal.account.createAliasNotPermitted"></w-permit-message>
                        </div>
                    </w-permit>
                </w-step>
                <w-step>
                    <form name="form" novalidate ng-submit="form.$valid && $ctrl.createAlias()">
                        <div class="closable-input-wrapper">
                            <w-input-container>
                                <w-input name="newAlias"
                                         ng-model="$ctrl.newAlias"
                                         class="embed no-icon new-alias"
                                         type="text"
                                         placeholder="modal.account.placeholder"
                                         ng-model-options="{updateOn: 'input blur', debounce: { 'input': 500, 'blur': 0 }}"
                                         pending="$ctrl.pendingAlias || $ctrl.signLoader"
                                         w-i18n-attr="placeholder"
                                         required
                                         w-validate
                                         w-validator-custom="{{!$ctrl.invalid && !$ctrl.pendingAlias}}">
                                </w-input>

                                <w-loader ng-if="$ctrl.pendingAlias"></w-loader>

                                <div class="create-alias-wrap">
                                    <w-analytics event="'Account Alias New Click With Name'" event-target="'ui'">
                                        <w-button
                                                disabled="$ctrl.signLoader || $ctrl.invalid || $ctrl.pendingAlias || !$ctrl.newAlias"
                                                class="tiny submit margin-right-1" type="submit">
                                            <span w-i18n="modal.account.create"></span>
                                        </w-button>
                                    </w-analytics>
                                    <span class="caption-1 basic-700"
                                          params="{price: $ctrl.fee.toFormat(), name: $ctrl.fee.asset.name}"
                                          w-i18n="modal.account.fee"></span>
                                </div>

                                <div class="flex-row split-half data margin-top-2" ng-if="$ctrl.signLoader">
                                    <div class="basic-500" w-i18n-ns="app.ui" w-i18n="directives.sign.txId"></div>
                                    <div>{{$ctrl.transactionId}}</div>
                                </div>

                                <div class="errors-margin text-center footnote-1 basic-500"
                                     w-i18n="modal.sign.signByLedger"
                                     w-i18n-ns="app.ui"
                                     ng-if="$ctrl.signLoader && $ctrl.isLedger">
                                </div>

                                <div class="errors-margin text-center footnote-1 basic-500"
                                     w-i18n-ns="app.ui"
                                     w-i18n="directives.sign.confirmRequestKeeper.waiting"
                                     ng-if="$ctrl.signLoader && $ctrl.isKeeper">
                                </div>

                                <div class="sign-loader" ng-if="$ctrl.signLoader">
                                    <w-loader></w-loader>
                                </div>

                                <div class="errors-margin">
                                    <div class="bottom-warning margin-3" ng-if="!!$ctrl.errorCreateAliasMsg">
                                            <div class="body-2 error-400 margin-05">{{$ctrl.errorCreateAliasMsg}}</div>
                                    </div>
                                    <div class="bottom-warning margin-3" ng-if="$ctrl.signDeviceFail">
                                        <div class="plate-error">
                                            <div class="body-2 error-400 margin-05" w-i18n-ns="app.ui" w-i18n="confirmTransaction.{{::$ctrl.userType}}Unconfirmed.header"></div>
                                            <div class="footnote-1 basic-500" w-i18n-ns="app.ui" w-i18n="confirmTransaction.{{::$ctrl.userType}}Unconfirmed.description"></div>
                                        </div>
                                    </div>
                                    <w-input-error message="custom">
                                        <div ng-if="$ctrl.noMoneyForFee" w-i18n="modal.account.noMoney"></div>
                                        <div ng-if="$ctrl.invalidMinLength" w-i18n="modal.account.minLength"></div>
                                        <div ng-if="$ctrl.invalidMaxLength" w-i18n="modal.account.maxLength"></div>
                                        <div ng-if="$ctrl.invalidPattern" w-i18n="modal.account.invalidSymbols"></div>
                                        <div ng-if="$ctrl.invalidExist" w-i18n="modal.account.hasAlias"></div>
                                    </w-input-error>
                                </div>
                            </w-input-container>
                        </div>
                    </form>
                </w-step>
            </w-step-by-step>
        </div>
    </div>
</div>
